<template>
	<view class="content">
		<!-- 顶部 -->
		<u-navbar :is-back="false" title="">
			<view class="slot-wrap">
				<view class="" style="width: 130rpx;padding: 10rpx;display: flex;" @click="searchcity">
					<u-icon name="map" style="flex: 1;" color="#0285ff"></u-icon>
					<view class="" style="flex: 2;color: #0285ff;">
						{{scity}}
					</view>
					
				</view>
				<u-search :show-action="true" placeholder="搜索旅游信息" v-model="value" margin="0" @search="search(value)" @custom="search(value)"></u-search>
				
				<!-- <u-search v-model="keyword" disabled="true"></u-search> -->
			</view>
		</u-navbar>
		<!-- 通知 -->
		<view style="width: 100%;">
			<u-notice-bar style="color: 0285ff;" mode="horizontal" type="primary" :list="list"></u-notice-bar>
			
		</view>
		<!-- 轮播 -->
		<view class="wrap">
			<u-swiper :list="list2" height="500rpx"></u-swiper>
		</view>
		<!-- icon -->
		<u-grid :col="4" :border="false">
			<u-grid-item @click="tolist('scenicspot')">
				<!-- <u-icon name="lock" :size="46"></u-icon> -->
				<!-- <i class="iconfont">&#xe608;</i> -->
				<view class="" style="width: 100rpx;height: 100rpx;">
					<image src="../../static/景点.svg" mode="" style="width: 100%;height: 100%;"></image>
				</view>
				<view class="grid-text">景点</view>
			</u-grid-item>
			<u-grid-item @click="tofoodlist">
				<!-- <u-icon name="lock" :size="46"></u-icon> -->
				<!-- <i class="iconfont">&#xe608;</i> -->
				<view class="" style="width: 100rpx;height: 100rpx;">
					<image src="../../static/美食.svg" mode="" style="width: 100%;height: 100%;"></image>
				</view>
				<view class="grid-text">美食</view>
			</u-grid-item>
			<u-grid-item>
				<!-- <u-icon name="lock" :size="46"></u-icon> -->
				<!-- <i class="iconfont">&#xe608;</i> -->
				<view class="" style="width: 100rpx;height: 100rpx;">
					<image src="../../static/酒店.svg" mode="" style="width: 100%;height: 100%;" ></image>
				</view>
				<view class="grid-text">住宿</view>
			</u-grid-item>
			<u-grid-item @click="totalklist">
				<!-- <u-icon name="lock" :size="46"></u-icon> -->
				<!-- <i class="iconfont">&#xe608;</i> -->
				<view class="" style="width: 100rpx;height: 100rpx;">
					<image src="../../static/游记.svg" mode="" style="width: 100%;height: 100%;"></image>
				</view>
				<view class="grid-text">游记</view>
			</u-grid-item>
			
			
		</u-grid>
		<!-- 热门 -->
		<view class="hot">
			<u-section title="热门景点" color="#0285ff" sub-color="#88c6ff" @click="tolist('hotlist')" sub-title="查看更多" font-size="40" :bold="true" style="margin: 10rpx;color: #2B85E4;"></u-section>
			
			<view class="" v-for="(item,index) in hotlist.slice(0,2)" :key="index" style="width: 100%;">
				<view class="" style="display: flex;padding: 20rpx;" @click="details(item)">
					<view class="" style="flex: 1;width: 300rpx;">
						<image :lazy-load="true" :src="item.img" mode="" style="width: 300rpx;height: 200rpx;border-radius: 20rpx;"></image>
					</view>
					<view class="" style="flex: 2;padding: 10rpx;">
						<view style="font-size: 30rpx;color: #0285ff;font-weight: bold;">{{item.title}}</view>
						<text class="u-line-3">
							{{item.text}}
						</text>
						<view class="u-text-right" style="color: #88c6ff;">
							查看详情<u-icon name="arrow-right"></u-icon>
						</view>
					</view>
				</view>
				
			</view>
		</view>
		<!-- 推荐 -->
		<view class="recommend">
			<u-section title="强力推荐" sub-title="查看更多" color="#0285ff" @click="tolist('recommendlist')" sub-color="#88c6ff" font-size="40" :bold="true" style="margin: 10rpx;"></u-section>
			<view class="" style="width: 700rpx; margin: 0 auto;">
				<view v-for="(item,index) in recommendlist.slice(0,4)" :key="index" @click="details(item)">
					<view class="" style="height: 250rpx;width: 350rpx;float: left;padding: 10rpx;position: relative;">
						<image :lazy-load="true" :src="item.img" mode="" style="width: 100%;height: 100%;border-radius: 20rpx;" ></image>
						<view class="" style="position: absolute;top:0;color: #FFFFFF;font-size: 30rpx; margin: 10rpx;background-color: rgb(0,0,0,0.3);">
							{{item.title}}
						</view>
						
					</view>
				</view>
			</view>
			
		</view>
		<!-- 博主推文-->	
		<view class="recommend">
			<u-section title="大家来分享" sub-title="查看更多" color="#0285ff" @click="totalklist" sub-color="#88c6ff" font-size="40" :bold="true" style="margin: 10rpx;"></u-section>
			<u-card :sub-title="item.subTitle" v-for="(item,index) in talk" :key="index" style="border: 1rpx solid #88c6ff;">
				<view class="" slot="body" @click="totalk(item)">
					<view class="u-body-item u-flex u-border-bottom u-col-between u-p-t-0" style="height: 200rpx;">
						<view class="u-body-item-title u-line-3 u-flex-3">{{item.text}}</view>
						<image :lazy-load="true" :src="item.img" class="u-flex-2" style="height: 100%; border-radius: 20rpx;"></image>
					</view>
				</view>
				<view class="u-flex" slot="foot" style="padding: 10px;">
					<u-icon name="chat" size="34" color="" :label="item.comment" class="u-flex-5"></u-icon>
					<u-icon name="star" size="34" color="" :label="item.comment" class="u-flex-1"></u-icon>
					<u-icon name="heart" size="34" color="" :label="item.comment" class="u-flex-1"></u-icon>
					
				</view>
			</u-card>
			
			
		</view>	
			<!-- 底部返回 -->
		<view class="wrap-dibu">
			<text>返回顶部</text>
			<u-back-top :scroll-top="scrollTop"></u-back-top>
		</view>	
	</view>
	<u-tabbar v-model="current" :list="list1" active-color="#0285ff"></u-tabbar>
</template>

<script>
	export default {
		data() {
			return {
				hotlist:"hotlist",
				recommendlist:"recommendlist",
				talk:"talk",
				value:'',
				scity:'重庆',
				talk:[],
				scrollTop: 0,
				title: 'Hello',
				list1: [],
				list2: [],
				list: [],
				current: 0,
				keyword: '重庆网红景点',
				hotlist:[],
				recommendlist:[],
				seach:[],
				scenicspot:[]
			}
		},
		mounted() {
			uni.request({
			  url: "http://127.0.0.1:4523/m1/1653531-0-default/info",
			  success: (res) => {
				this.list=res.data.data[0].list
				this.list1=res.data.data[0].list1
				this.list2=res.data.data[0].list2
				this.hotlist=res.data.data[0].hotlist
				this.recommendlist=res.data.data[0].recommendlist
				this.talk=res.data.data[0].talk
				this.scenicspot=res.data.data[0].scenicspot
			  },
			  fail: (err) => {
			    // console.error(err,11111111111);
			  },
			});
			
		},
		
		onPageScroll(e) {
				this.scrollTop = e.scrollTop;
			},
		methods: {
			search(value){
				// this.seach=this.scenicspot.filter(x=>
				// 	x.title.includes(value)
				// )
				uni.navigateTo({
				    url: '/pages/home/listinfo/listinfo?x='+JSON.stringify(value)
				})
			},
			searchcity(){
				uni.switchTab({
					url: '/pages/about/index'
				});

			},
			tofoodlist(){
				uni.navigateTo({
				    url: '/pages/home/foodlist/foodlist'
				})
			},
			totalklist(){
				uni.navigateTo({
				    url: '/pages/home/talklist/talklist'
				})
			},
			tolist(x){
				// uni.$emit('x', x)
				// 	uni.navigateBack({
				// 		delta: 1
				// })
				uni.navigateTo({
				    url: '/pages/home/listinfo/listinfo?x='+JSON.stringify(x)
				})
			},
			details(item){
				uni.navigateTo({
				    url: '/pages/home/details/details?item='+encodeURIComponent(JSON.stringify(item))
				})
			},
			totalk(talk){
				uni.navigateTo({
				    url: '/pages/home/talk/talk?talk='+encodeURIComponent(JSON.stringify(talk))
				})
			}
			
		},
		onShow() {
			let that = this
			uni.$on('scity',function(data){
				that.scity = data
			})
		},
		
	}
	
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}
	.slot-wrap {
		display: flex;
		align-items: center;
		justify-content: center;
		/* 如果您想让slot内容占满整个导航栏的宽度 */
		flex: 1;
		/* 如果您想让slot内容与导航栏左右有空隙 */
		/* padding: 0 30rpx; */
	}
	.wrap {
			/* padding: 40rpx; */
			width: 100%;
			/* height: 500rpx; */
		}
	.wrap-dibu {
			height: 200vh;
		}
	.grid-text {
			font-size: 28rpx;
			margin-top: 4rpx;
			color: $u-type-info;
		}
			
	.hot{
		width:100%;
	}
		
	.recommend{
		width:100%;
	}
</style>

